<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>专题列表 - 社交发现</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* 基础样式 */
        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }
        
        /* 导航栏样式 */
        .navbar {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        
        .logo {
            font-weight: 700;
            font-size: 1.5rem;
            color: #2c6ecb;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .logo i {
            font-size: 1.75rem;
        }
        
        .nav-link {
            color: #666;
            font-weight: 500;
            margin: 0 0.5rem;
            transition: all 0.2s ease;
        }
        
        .nav-link:hover, .nav-link.active {
            color: #2c6ecb;
        }
        
        .user-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        /* 主内容区 */
        .main-container {
            padding: 2rem 0;
        }
        
        .page-title {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: #1a1a1a;
        }
        
        .page-description {
            color: #666;
            margin-bottom: 1.5rem;
        }
        
        /* 筛选区样式 */
        .filters-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }
        
        .filter-section {
            margin-bottom: 1.5rem;
        }
        
        .filter-title {
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: #333;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .search-box {
            position: relative;
            max-width: 400px;
        }
        
        .search-box input {
            width: 100%;
            padding: 0.75rem 1rem 0.75rem 2.5rem;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            font-size: 0.95rem;
        }
        
        .search-box i {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
        }
        
        .filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }
        
        .filter-chip {
            background-color: #f0f2f5;
            border: none;
            border-radius: 20px;
            padding: 0.35rem 1rem;
            font-size: 0.9rem;
            color: #333;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        .filter-chip:hover {
            background-color: #e1e4e8;
        }
        
        .filter-chip.active {
            background-color: #2c6ecb;
            color: white;
        }
        
        .range-slider {
            width: 100%;
            margin: 1rem 0;
        }
        
        .date-range {
            display: flex;
            gap: 1rem;
        }
        
        .date-range input {
            flex: 1;
            padding: 0.5rem;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
        }
        
        .filter-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 1rem;
            border-top: 1px solid #f0f0f0;
        }
        
        .btn-reset {
            color: #666;
            background: none;
            border: 1px solid #e0e0e0;
            padding: 0.5rem 1.25rem;
            border-radius: 6px;
            transition: all 0.2s ease;
        }
        
        .btn-reset:hover {
            background-color: #f5f5f5;
        }
        
        .btn-apply {
            background-color: #2c6ecb;
            color: white;
            border: none;
            padding: 0.5rem 1.25rem;
            border-radius: 6px;
            transition: all 0.2s ease;
        }
        
        .btn-apply:hover {
            background-color: #2457a3;
        }
        
        /* 排序和视图切换 */
        .sort-view-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        
        .sort-options {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .sort-label {
            color: #666;
            font-size: 0.95rem;
        }
        
        .sort-select {
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            padding: 0.4rem 0.75rem;
            font-size: 0.95rem;
            background-color: white;
        }
        
        .view-options {
            display: flex;
            gap: 0.5rem;
        }
        
        .view-btn {
            background-color: white;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            padding: 0.4rem 0.75rem;
            color: #666;
            transition: all 0.2s ease;
        }
        
        .view-btn:hover, .view-btn.active {
            background-color: #f0f2f5;
            color: #2c6ecb;
            border-color: #d1d9e6;
        }
        
        /* 专题列表样式 */
        .topics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .topic-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            transition: all 0.3s ease;
            text-decoration: none;
            color: inherit;
            display: flex;
            flex-direction: column;
        }
        
        .topic-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
            color: inherit;
        }
        
        .topic-image {
            height: 160px;
            width: 100%;
            object-fit: cover;
        }
        
        .topic-content {
            padding: 1.25rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .topic-category {
            display: inline-block;
            font-size: 0.8rem;
            color: #2c6ecb;
            background-color: #eef2fa;
            padding: 0.25rem 0.75rem;
            border-radius: 4px;
            margin-bottom: 0.75rem;
            align-self: flex-start;
        }
        
        .topic-title {
            font-weight: 600;
            font-size: 1.15rem;
            margin-bottom: 0.5rem;
            line-height: 1.4;
        }
        
        .topic-description {
            color: #666;
            font-size: 0.95rem;
            line-height: 1.5;
            margin-bottom: 1rem;
            flex: 1;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .topic-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
            color: #999;
            border-top: 1px solid #f5f5f5;
            padding-top: 1rem;
            margin-top: auto;
        }
        
        .topic-stats {
            display: flex;
            gap: 1rem;
        }
        
        .topic-stat {
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        .topic-author {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .author-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        /* 列表视图样式 */
        .topics-list {
            display: none;
            flex-direction: column;
            gap: 1rem;
        }
        
        .topics-list.active {
            display: flex;
        }
        
        .topics-grid.hidden {
            display: none;
        }
        
        .topic-list-item {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            transition: all 0.2s ease;
            text-decoration: none;
            color: inherit;
            display: flex;
        }
        
        .topic-list-item:hover {
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
            color: inherit;
        }
        
        .topic-list-image {
            width: 140px;
            height: 140px;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .topic-list-content {
            padding: 1.25rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .topic-list-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 0.5rem;
        }
        
        .topic-list-title {
            font-weight: 600;
            font-size: 1.25rem;
            line-height: 1.4;
            margin: 0;
        }
        
        .topic-list-category {
            display: inline-block;
            font-size: 0.8rem;
            color: #2c6ecb;
            background-color: #eef2fa;
            padding: 0.25rem 0.75rem;
            border-radius: 4px;
        }
        
        .topic-list-description {
            color: #666;
            font-size: 0.95rem;
            line-height: 1.5;
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .topic-list-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
            color: #999;
            margin-top: auto;
        }
        
        /* 分页样式 */
        .pagination-container {
            display: flex;
            justify-content: center;
            margin-top: 2rem;
        }
        
        .pagination {
            display: flex;
            gap: 0.5rem;
        }
        
        .page-btn {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            border: 1px solid #e0e0e0;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            transition: all 0.2s ease;
            cursor: pointer;
        }
        
        .page-btn:hover {
            border-color: #2c6ecb;
            color: #2c6ecb;
        }
        
        .page-btn.active {
            background-color: #2c6ecb;
            color: white;
            border-color: #2c6ecb;
        }
        
        .page-btn.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .page-btn.disabled:hover {
            border-color: #e0e0e0;
            color: #666;
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .topics-grid {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            }
        }
        
        @media (max-width: 768px) {
            .filter-section.hidden-sm {
                display: none;
            }
            
            .sort-view-controls {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
            
            .topic-list-item {
                flex-direction: column;
            }
            
            .topic-list-image {
                width: 100%;
                height: 160px;
            }
            
            .topics-grid {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 576px) {
            .navbar-nav {
                gap: 0.5rem;
            }
            
            .filter-actions {
                flex-direction: column;
                gap: 0.75rem;
            }
            
            .btn-reset, .btn-apply {
                width: 100%;
            }
            
            .date-range {
                flex-direction: column;
                gap: 0.5rem;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg py-3">
        <div class="container">
            <a href="#" class="logo">
                <i class="fas fa-compass"></i>
                <span>社交发现</span>
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <i class="fas fa-bars"></i>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#">专题</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">话题</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">活动</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">排行榜</a>
                    </li>
                </ul>
                
                <div class="d-flex align-items-center gap-3">
                    <button class="btn btn-sm btn-outline-primary">
                        <i class="fas fa-plus me-1"></i> 创建专题
                    </button>
                    <img src="https://picsum.photos/id/1005/38/38" alt="用户头像" class="user-avatar">
                </div>
            </div>
        </div>
    </nav>
    
    <!-- 主内容区 -->
    <div class="main-container">
        <div class="container">
            <h1 class="page-title">热门专题</h1>
            <p class="page-description">探索社区中最受欢迎的专题内容，发现志同道合的朋友</p>
            
            <!-- 筛选区 -->
            <div class="filters-container">
                <!-- 搜索框 -->
                <div class="filter-section">
                    <div class="search-box">
                        <i class="fas fa-search"></i>
                        <input type="text" placeholder="搜索专题、标签或内容...">
                    </div>
                </div>
                
                <!-- 分类筛选 -->
                <div class="filter-section">
                    <h3 class="filter-title">
                        <i class="fas fa-th-large"></i> 专题分类
                    </h3>
                    <div class="filter-options">
                        <button class="filter-chip active">
                            <i class="fas fa-check"></i> 全部
                        </button>
                        <button class="filter-chip">
                            <i class="fas fa-check"></i> 科技
                        </button>
                        <button class="filter-chip">
                            <i class="fas fa-check"></i> 职场
                        </button>
                        <button class="filter-chip">
                            <i class="fas fa-check"></i> 生活
                        </button>
                        <button class="filter-chip">
                            <i class="fas fa-check"></i> 艺术
                        </button>
                        <button class="filter-chip">
                            <i class="fas fa-check"></i> 美食
                        </button>
                        <button class="filter-chip">
                            <i class="fas fa-check"></i> 旅行
                        </button>
                        <button class="filter-chip">
                            <i class="fas fa-check"></i> 健康
                        </button>
                    </div>
                </div>
                
                <!-- 标签筛选 -->
                <div class="filter-section hidden-sm">
                    <h3 class="filter-title">
                        <i class="fas fa-tags"></i> 热门标签
                    </h3>
                    <div class="filter-options">
                        <button class="filter-chip">人工智能</button>
                        <button class="filter-chip">前端开发</button>
                        <button class="filter-chip">摄影</button>
                        <button class="filter-chip">健身</button>
                        <button class="filter-chip">阅读</button>
                        <button class="filter-chip">电影</button>
                        <button class="filter-chip">创业</button>
                        <button class="filter-chip">设计</button>
                        <button class="filter-chip">音乐</button>
                        <button class="filter-chip">理财</button>
                    </div>
                </div>
                
                <!-- 参与人数筛选 -->
                <div class="filter-section hidden-sm">
                    <h3 class="filter-title">
                        <i class="fas fa-users"></i> 参与人数
                    </h3>
                    <input type="range" min="0" max="10000" value="5000" class="range-slider" id="participantRange">
                    <div class="d-flex justify-content-between">
                        <span>0人</span>
                        <span id="participantValue">5000+人</span>
                    </div>
                </div>
                
                <!-- 时间筛选 -->
                <div class="filter-section hidden-sm">
                    <h3 class="filter-title">
                        <i class="fas fa-calendar-alt"></i> 发布时间
                    </h3>
                    <div class="date-range">
                        <input type="date" id="startDate">
                        <input type="date" id="endDate">
                    </div>
                </div>
                
                <!-- 筛选操作按钮 -->
                <div class="filter-actions">
                    <button class="btn-reset">
                        <i class="fas fa-sync-alt me-1"></i> 重置筛选
                    </button>
                    <button class="btn-apply">
                        <i class="fas fa-filter me-1"></i> 应用筛选
                    </button>
                </div>
            </div>
            
            <!-- 排序和视图切换 -->
            <div class="sort-view-controls">
                <div class="sort-options">
                    <span class="sort-label">排序方式：</span>
                    <select class="sort-select">
                        <option value="popular">热门程度</option>
                        <option value="latest">最新发布</option>
                        <option value="participants">参与人数</option>
                        <option value="comments">评论最多</option>
                    </select>
                </div>
                
                <div class="view-options">
                    <button class="view-btn active" id="gridViewBtn" title="网格视图">
                        <i class="fas fa-th"></i>
                    </button>
                    <button class="view-btn" id="listViewBtn" title="列表视图">
                        <i class="fas fa-list"></i>
                    </button>
                </div>
            </div>
            
            <!-- 专题列表 - 网格视图 -->
            <div class="topics-grid" id="topicsGrid">
                <!-- 专题1 -->
                <a href="#" class="topic-card">
                    <img src="https://picsum.photos/id/1/600/400" alt="人工智能发展趋势专题封面" class="topic-image">
                    <div class="topic-content">
                        <span class="topic-category">科技</span>
                        <h3 class="topic-title">2023人工智能发展趋势与应用场景探索</h3>
                        <p class="topic-description">深入探讨人工智能技术的最新发展趋势，分析在医疗、金融、教育等领域的创新应用，以及未来可能的发展方向。</p>
                        <div class="topic-meta">
                            <div class="topic-stats">
                                <div class="topic-stat">
                                    <i class="fas fa-users"></i> 3.2k
                                </div>
                                <div class="topic-stat">
                                    <i class="fas fa-comment"></i> 568
                                </div>
                                <div class="topic-stat">
                                    <i class="fas fa-heart"></i> 1.8k
                                </div>
                            </div>
                            <div class="topic-author">
                                <img src="https://picsum.photos/id/1012/24/24" alt="作者头像" class="author-avatar">
                                <span>李教授</span>
                            </div>
                        </div>
                    </div>
                </a>
                
                <!-- 专题2 -->
                <a href="#" class="topic-card">
                    <img src="https://picsum.photos/id/20/600/400" alt="远程工作效率提升专题封面" class="topic-image">
                    <div class="topic-content">
                        <span class="topic-category">职场</span>
                        <h3 class="topic-title">远程工作效率提升指南：工具与方法</h3>
                        <p class="topic-description">分享远程工作环境下提高效率的实用工具和方法，帮助职场人士更好地平衡工作与生活，提升团队协作效率。</p>
                        <div class="topic-meta">
                            <div class="topic-stats">
                                <div class="topic-stat">
                                    <i class="fas fa-users"></i> 2.7k
                                </div>
                                <div class="topic-stat">
                                    <i class="fas fa-comment"></i> 423
                                </div>
                                <div class="topic-stat">
                                    <i class="fas fa-heart"></i> 1.5k
                                </div>
                            </div>
                            <div class="topic-author">
                                <img src="https://picsum.photos/id/1025/24/24" alt="作者头像" class="author-avatar">
                                <span>张经理</span>
                            </div>
                        </div>
                    </div>
                </a>
                
                <!-- 专题3 -->
                <a href="#" class="topic-card">
                    <img src="https://picsum.photos/id/42/600/400" alt="城市摄影专题封面" class="topic-image">
                    <div class="topic-content">
                        <span class="topic-category">艺术</span>
                        <h3 class="topic-title">城市建筑摄影：捕捉都市之美</h3>
                        <p class="topic-description">探讨城市建筑摄影的技巧和灵感，从构图、光影到后期处理，教你如何用镜头捕捉城市的独特魅力和建筑之美。</p>
                        <div class="topic-meta">
                            <div class="topic-stats">
                                <div class="topic-stat">
                                    <i class="fas fa-users"></i> 4.1k
                                </div>
                                <div class="topic-stat">
                                    <i class="fas fa-comment"></i> 876
                                </div>
                                <div class="topic-stat">
                                    <i class="fas fa-heart"></i> 3.2k
                                </div>
                            </div>
                            <div class="topic-author">
                                <img src="https://picsum.photos/id/1027/24/24" alt="作者头像" class="author-avatar">
                                <span>王摄影师</span>
                            </div>
                        </div>
                    </div>
                </a>
                
                <!-- 专题4 -->
                <a href="#" class="topic-card">
                    <img src="https://picsum.photos/id/292/600/400" alt="健康饮食专题封面" class="topic-image">
                    <div class="topic-content">
                        <span class="topic-category">健康</span>
                        <h3 class="topic-title">办公室健康饮食：忙碌生活的营养方案</h3>
                        <p class="topic-description">为职场人士提供简单易行的健康饮食方案，包括快速营养早餐、便携午餐搭配和办公室健康零食选择，让忙碌的工作也能保持健康。</p>
                        <div class="topic-meta">
                            <div class="topic-stats">
                                <div class="topic-stat">
                                    <i class="fas fa-users"></i> 2.3k
                                </div>
                                <div class="topic-stat">
                                    <i class="fas fa-comment"></i> 356
                                </div>
                                <div class="topic-stat">
                                    <i class="fas fa-heart"></i> 1.2k
                                </div>
                            </div>
                            <div class="topic-author">
                                <img src="https://picsum.photos/id/1062/24/24" alt="作者头像" class="author-avatar">
                                <span>刘营养师</span>
                            </div>
                        </div>
                    </div>
                </a>
                
                <!-- 专题5 -->
                <a href="#" class="topic-card">
                    <img src="https://picsum.photos/id/306/600/400" alt="前端框架专题封面" class="topic-image">
                    <div class="topic-content">
                        <span class="topic-category">科技</span>
                        <h3 class="topic-title">2023前端框架对比：React、Vue与Angular</h3>
                        <p class="topic-description">详细对比当前主流前端框架的优缺点、适用场景和性能表现，帮助开发者做出更合适的技术选型，提升开发效率。</p>
                        <div class="topic-meta">
                            <div class="topic-stats">
                                <div class="topic-stat">
                                    <i class="fas fa-users"></i> 3.8k
                                </div>
                                <div class="topic-stat">
                                    <i class="fas fa-comment"></i> 924
                                </div>
                                <div class="topic-stat">
                                    <i class="fas fa-heart"></i> 2.5k
                                </div>
                            </div>
                            <div class="topic-author">
                                <img src="https://picsum.photos/id/1074/24/24" alt="作者头像" class="author-avatar">
                                <span>陈工程师</span>
                            </div>
                        </div>
                    </div>
                </a>
                
                <!-- 专题6 -->
                <a href="#" class="topic-card">
                    <img src="https://picsum.photos/id/431/600/400" alt="旅行摄影专题封面" class="topic-image">
                    <div class="topic-content">
                        <span class="topic-category">旅行</span>
                        <h3 class="topic-title">小众旅行目的地：远离喧嚣的秘境探索</h3>
                        <p class="topic-description">推荐国内外鲜为人知的小众旅行目的地，分享独特的旅行体验和实用攻略，带你发现不为人知的美丽风景。</p>
                        <div class="topic-meta">
                            <div class="topic-stats">
                                <div class="topic-stat">
                                    <i class="fas fa-users"></i> 5.2k
                                </div>
                                <div class="topic-stat">
                                    <i class="fas fa-comment"></i> 1253
                                </div>
                                <div class="topic-stat">
                                    <i class="fas fa-heart"></i> 4.7k
                                </div>
                            </div>
                            <div class="topic-author">
                                <img src="https://picsum.photos/id/1083/24/24" alt="作者头像" class="author-avatar">
                                <span>赵旅行者</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            
            <!-- 专题列表 - 列表视图 -->
            <div class="topics-list" id="topicsList">
                <!-- 专题1 -->
                <a href="#" class="topic-list-item">
                    <img src="https://picsum.photos/id/1/600/400" alt="人工智能发展趋势专题封面" class="topic-list-image">
                    <div class="topic-list-content">
                        <div class="topic-list-header">
                            <h3 class="topic-list-title">2023人工智能发展趋势与应用场景探索</h3>
                            <span class="topic-list-category">科技</span>
                        </div>
                        <p class="topic-list-description">深入探讨人工智能技术的最新发展趋势，分析在医疗、金融、教育等领域的创新应用，以及未来可能的发展方向。</p>
                        <div class="topic-list-meta">
                            <div class="topic-stats">
                                <div class="topic-stat">
                                    <i class="fas fa-users"></i> 3.2k 参与
                                </div>
                                <div class="topic-stat">
                                    <i class="fas fa-comment"></i> 568 评论
                                </div>
                                <div class="topic-stat">
                                    <i class="fas fa-heart"></i> 1.8k 点赞
                                </div>
                            </div>
                            <div class="topic-author">
                                <img src="https://picsum.photos/id/1012/24/24" alt="作者头像" class="author-avatar">
                                <span>李教授</span>
                            </div>
                        </div>
                    </div>
                </a>
                
                <!-- 专题2 -->
                <a href="#" class="topic-list-item">
                    <img src="https://picsum.photos/id/20/600/400" alt="远程工作效率提升专题封面" class="topic-list-image">
                    <div class="topic-list-content">
                        <div class="topic-list-header">
                            <h3 class="topic-list-title">远程工作效率提升指南：工具与方法</h3>
                            <span class="topic-list-category">职场</span>
                        </div>
                        <p class="topic-list-description">分享远程工作环境下提高效率的实用工具和方法，帮助职场人士更好地平衡工作与生活，提升团队协作效率。</p>
                        <div class="topic-list-meta">
                            <div class="topic-stats">
                                <div class="topic-stat">
                                    <i class="fas fa-users"></i> 2.7k 参与
                                </div>
                                <div class="topic-stat">
                                    <i class="fas fa-comment"></i> 423 评论
                                </div>
                                <div class="topic-stat">
                                    <i class="fas fa-heart"></i> 1.5k 点赞
                                </div>
                            </div>
                            <div class="topic-author">
                                <img src="https://picsum.photos/id/1025/24/24" alt="作者头像" class="author-avatar">
                                <span>张经理</span>
                            </div>
                        </div>
                    </div>
                </a>
                
                <!-- 专题3 -->
                <a href="#" class="topic-list-item">
                    <img src="https://picsum.photos/id/42/600/400" alt="城市摄影专题封面" class="topic-list-image">
                    <div class="topic-list-content">
                        <div class="topic-list-header">
                            <h3 class="topic-list-title">城市建筑摄影：捕捉都市之美</h3>
                            <span class="topic-list-category">艺术</span>
                        </div>
                        <p class="topic-list-description">探讨城市建筑摄影的技巧和灵感，从构图、光影到后期处理，教你如何用镜头捕捉城市的独特魅力和建筑之美。</p>
                        <div class="topic-list-meta">
                            <div class="topic-stats">
                                <div class="topic-stat">
                                    <i class="fas fa-users"></i> 4.1k 参与
                                </div>
                                <div class="topic-stat">
                                    <i class="fas fa-comment"></i> 876 评论
                                </div>
                                <div class="topic-stat">
                                    <i class="fas fa-heart"></i> 3.2k 点赞
                                </div>
                            </div>
                            <div class="topic-author">
                                <img src="https://picsum.photos/id/1027/24/24" alt="作者头像" class="author-avatar">
                                <span>王摄影师</span>
                            </div>
                        </div>
                    </div>
                </a>
                
                <!-- 专题4 -->
                <a href="#" class="topic-list-item">
                    <img src="https://picsum.photos/id/292/600/400" alt="健康饮食专题封面" class="topic-list-image">
                    <div class="topic-list-content">
                        <div class="topic-list-header">
                            <h3 class="topic-title">办公室健康饮食：忙碌生活的营养方案</h3>
                            <span class="topic-list-category">健康</span>
                        </div>
                        <p class="topic-list-description">为职场人士提供简单易行的健康饮食方案，包括快速营养早餐、便携午餐搭配和办公室健康零食选择，让忙碌的工作也能保持健康。</p>
                        <div class="topic-list-meta">
                            <div class="topic-stats">
                                <div class="topic-stat">
                                    <i class="fas fa-users"></i> 2.3k 参与
                                </div>
                                <div class="topic-stat">
                                    <i class="fas fa-comment"></i> 356 评论
                                </div>
                                <div class="topic-stat">
                                    <i class="fas fa-heart"></i> 1.2k 点赞
                                </div>
                            </div>
                            <div class="topic-author">
                                <img src="https://picsum.photos/id/1062/24/24" alt="作者头像" class="author-avatar">
                                <span>刘营养师</span>
                            </div>
                        </div>
                    </div>
                </a>
                
                <!-- 专题5 -->
                <a href="#" class="topic-list-item">
                    <img src="https://picsum.photos/id/306/600/400" alt="前端框架专题封面" class="topic-list-image">
                    <div class="topic-list-content">
                        <div class="topic-list-header">
                            <h3 class="topic-list-title">2023前端框架对比：React、Vue与Angular</h3>
                            <span class="topic-list-category">科技</span>
                        </div>
                        <p class="topic-list-description">详细对比当前主流前端框架的优缺点、适用场景和性能表现，帮助开发者做出更合适的技术选型，提升开发效率。</p>
                        <div class="topic-list-meta">
                            <div class="topic-stats">
                                <div class="topic-stat">
                                    <i class="fas fa-users"></i> 3.8k 参与
                                </div>
                                <div class="topic-stat">
                                    <i class="fas fa-comment"></i> 924 评论
                                </div>
                                <div class="topic-stat">
                                    <i class="fas fa-heart"></i> 2.5k 点赞
                                </div>
                            </div>
                            <div class="topic-author">
                                <img src="https://picsum.photos/id/1074/24/24" alt="作者头像" class="author-avatar">
                                <span>陈工程师</span>
                            </div>
                        </div>
                    </div>
                </a>
                
                <!-- 专题6 -->
                <a href="#" class="topic-list-item">
                    <img src="https://picsum.photos/id/431/600/400" alt="旅行摄影专题封面" class="topic-list-image">
                    <div class="topic-list-content">
                        <div class="topic-list-header">
                            <h3 class="topic-list-title">小众旅行目的地：远离喧嚣的秘境探索</h3>
                            <span class="topic-list-category">旅行</span>
                        </div>
                        <p class="topic-list-description">推荐国内外鲜为人知的小众旅行目的地，分享独特的旅行体验和实用攻略，带你发现不为人知的美丽风景。</p>
                        <div class="topic-list-meta">
                            <div class="topic-stats">
                                <div class="topic-stat">
                                    <i class="fas fa-users"></i> 5.2k 参与
                                </div>
                                <div class="topic-stat">
                                    <i class="fas fa-comment"></i> 1253 评论
                                </div>
                                <div class="topic-stat">
                                    <i class="fas fa-heart"></i> 4.7k 点赞
                                </div>
                            </div>
                            <div class="topic-author">
                                <img src="https://picsum.photos/id/1083/24/24" alt="作者头像" class="author-avatar">
                                <span>赵旅行者</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            
            <!-- 分页 -->
            <div class="pagination-container">
                <div class="pagination">
                    <button class="page-btn disabled">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button class="page-btn active">1</button>
                    <button class="page-btn">2</button>
                    <button class="page-btn">3</button>
                    <button class="page-btn">4</button>
                    <button class="page-btn">5</button>
                    <button class="page-btn">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 参与人数滑块交互
            const participantRange = document.getElementById('participantRange');
            const participantValue = document.getElementById('participantValue');
            
            if (participantRange && participantValue) {
                participantRange.addEventListener('input', function() {
                    participantValue.textContent = this.value + '+人';
                });
            }
            
            // 筛选标签交互
            const filterChips = document.querySelectorAll('.filter-chip');
            filterChips.forEach(chip => {
                chip.addEventListener('click', function() {
                    // 如果是"全部"标签，特殊处理
                    if (this.textContent.includes('全部')) {
                        filterChips.forEach(c => {
                            c.classList.remove('active');
                        });
                        this.classList.add('active');
                    } else {
                        // 移除"全部"标签的选中状态
                        filterChips.forEach(c => {
                            if (c.textContent.includes('全部')) {
                                c.classList.remove('active');
                            }
                        });
                        this.classList.toggle('active');
                    }
                });
            });
            
            // 视图切换交互
            const gridViewBtn = document.getElementById('gridViewBtn');
            const listViewBtn = document.getElementById('listViewBtn');
            const topicsGrid = document.getElementById('topicsGrid');
            const topicsList = document.getElementById('topicsList');
            
            if (gridViewBtn && listViewBtn && topicsGrid && topicsList) {
                gridViewBtn.addEventListener('click', function() {
                    gridViewBtn.classList.add('active');
                    listViewBtn.classList.remove('active');
                    topicsGrid.classList.remove('hidden');
                    topicsList.classList.remove('active');
                });
                
                listViewBtn.addEventListener('click', function() {
                    listViewBtn.classList.add('active');
                    gridViewBtn.classList.remove('active');
                    topicsGrid.classList.add('hidden');
                    topicsList.classList.add('active');
                });
            }
            
            // 分页按钮交互
            const pageBtns = document.querySelectorAll('.page-btn:not(.disabled)');
            pageBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    if (!this.querySelector('i')) { // 排除箭头按钮
                        pageBtns.forEach(b => b.classList.remove('active'));
                        this.classList.add('active');
                    }
                });
            });
            
            // 重置筛选按钮
            const resetBtn = document.querySelector('.btn-reset');
            if (resetBtn) {
                resetBtn.addEventListener('click', function() {
                    // 重置所有筛选条件
                    filterChips.forEach(chip => {
                        chip.classList.remove('active');
                        if (chip.textContent.includes('全部')) {
                            chip.classList.add('active');
                        }
                    });
                    
                    // 重置滑块
                    if (participantRange) {
                        participantRange.value = 5000;
                        participantValue.textContent = '5000+人';
                    }
                    
                    // 重置日期
                    document.getElementById('startDate').value = '';
                    document.getElementById('endDate').value = '';
                    
                    // 重置排序
                    document.querySelector('.sort-select').value = 'popular';
                });
            }
            
            // 应用筛选按钮
            const applyBtn = document.querySelector('.btn-apply');
            if (applyBtn) {
                applyBtn.addEventListener('click', function() {
                    // 模拟筛选应用，实际项目中这里会发送筛选条件到服务器
                    alert('筛选条件已应用！');
                });
            }
        });
    </script>
</body>
</html>
    
